import React from 'react';
import { useHistory } from 'react-router-dom';
import { postSysUserUpdPwd } from '../../../Api/userUrl'
import { ChangePasswordAll, ChangePhoneForm } from './style';
import { PageHeader, Form, Input, Button, message } from 'antd'

const ChangePassword = () => {
    const history = useHistory();
    const [form] = Form.useForm();
    const { resetFields } = form;
    const onFinish = (values) => {
        if (values.newPwd !== values.newPwdOk) {
            message.error('新密码两次输入不一致！')
            return;
        }
        values.id = sessionStorage.getItem('userId');
        delete values.newPwdOk;
        ; (async () => {
            const { code, msg } = await postSysUserUpdPwd(values);
            if (code === '20000') {
                resetFields();
                message.success('修改成功!');
                sessionStorage.removeItem('token');
                history.push('/login');
            } else {
                message.error(msg)
            }
        })();
    };
    return <ChangePasswordAll>
        <PageHeader
            className="site-page-header"
            title="修改密码"
        ></PageHeader>
        <ChangePhoneForm>
            <Form
                {...layout}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                form={form}
            >
                <Form.Item
                    label="旧密码"
                    name="oldPwd"
                    rules={[
                        {
                            required: true,
                            message: '请输入旧密码',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="新密码"
                    name="newPwd"
                    rules={[
                        {
                            required: true,
                            message: '请输入新密码!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="新密码确认"
                    name="newPwdOk"
                    rules={[
                        {
                            required: true,
                            message: '请确认新密码!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        修改
                    </Button>
                </Form.Item>
            </Form>
        </ChangePhoneForm>

    </ChangePasswordAll>
}
const layout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 18,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

export default ChangePassword;